<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{
		background:gray;
		}
		#test1 {
			width:0px;
			height:500px;
			border-left:250px  solid   white;
			border-right:250px solid black ;
			border-radius:250px;
			position:fixed;
  			left:500px;
  			top:150px;
  			float:left;
		}
		#test1::before{
		content:"";
		display:block;
		width:250px;
		height: 250px;
		background:black;
		box-sizing:border-box;
		border:85px solid white;
		margin-left: -125px;
		border-radius:100%;

		}
		#test1::after{
		content:"";
		display:block;
		width:250px;
		height: 250px;
		background:white;
		box-sizing:border-box;
		border:85px solid black;
		margin-left: -125px;
		border-radius:100%;
		}
		#test2 ,#test3{
		height:70px;
		width:250px;
		float:left;
		}
		#test2 {
		background:blue;
		position:relative;
		top:30px;
		}
		#test3 {
		background:red;
		}

	</style>
</head>
<body>
	<div id='test1'>
	</div>
<div id='test2'></div>
<div id='test3'></div>

</body>
</html>